<#import "/spring.ftl" as spring />
<#import "/inspector-time-macros.ftl" as imacro />

<html>
<head>
	<title>scheduleRulesWeekly.ftl</title>
	
<style>
	#message {
		color: #f5934a;
		font-family: verdana, arial, helvetica, sans serif;
		font-size: 12px;
		font-weight: none;
		font-style: italic;
		padding: 3px 15px 3px 15px;
		margin: 5px 15px 15px 15px;
		text-align: center;
	}

	.calendarContainer {
		position:relative;
		width: 570px; 
		height: 420px; 
		font-family: verdana, arial, helvetica, sans serif;
	}
						
	/* Creates the horizontal rows with the date text */						
	.dayRow {
		position: absolute; 
		border-bottom: 1px solid #004071; 
		width: 100%; 
	}
	
	.dayTxt {
		position: absolute;
		top: 25%;
		font-size: 11px;
	}
	
	.pastDayTxt {
		position: absolute;
		top: 25%;
		font-size: 11px;
		font-style: italic;
		color: #c0c0c0;
	}
	/* Creates the horizontal rows with the date text */
	
	/* Creates the wrapper for the timeslot bar */
	.timeslotWrapper {
		position: absolute; 
		top: 20%;
		border-right: 2px solid #f5934a;
		border-left: 2px solid #f5934a;
		padding-top: 4px;
		padding-bottom: 4px;
	}
	
	/* Color for "available" timeslotWrapper */
	.timeslotWrapperAvail {
		border-color: #f5934a;
	}
	
	/* Color for "unavailable" timeslotWrapper */
	.timeslotWrapperUnavail {
		border-color: #7fa0b8;
	}
	
	/* Creates the timeslot bar */
	.timeslot {
		width: 100%;
		text-align: center; 
		padding: 3px 0px 3px 0px;
		font-size: 9px;
	}
	
	/* Color for "available" timeslot */
	.timeslotAvail {
		background-color: #f5934a;
	}
	
	/* Color for "available" timeslot */
	.timeslotUnavail {
		background-color: #7fa0b8;
		font-style: italic;
	}
	
	.recurring {
		background-image: url(../../images/timeslot-recurring.gif);
		background-repeat:no-repeat;
		background-position: 2px 50%; 
	}
	
	.timeslot a {
		text-decoration: none;
		color: black;
	}

	.timeslot a:hover {
		text-decoration: underline;
	}
	
	/* Creates the availability bar */
	
	/* Creates the hours and the marked line below them */
	.hour {
		position:absolute;
		text-align:center;
		bottom: 15px;
	}
	
	.strongHour {
		font-weight: bold;
		font-size: 120%
	}
	
	.hourContainer {
		position:absolute; 
		top: 15px; 
		border-bottom: 1px solid #004071; 
		width: 100%; 
		height: 30px;
		font-size: 10px;
	}
	
	.hourLine {
		position: absolute; 
		background-color: #004071; 
		width: 1px; 
		height: 10px;
		bottom: 0px;
	    padding: 0px; margin:0px;
	}
	/* Creates the hours and the marked line below them */
	
	/* Defines rules for the timeslot legend */
	.timeslotLegend {
		float: right;
		margin-bottom: 10px;
	}
		
	.legendBox {
		width: 15px;
		height: 15px;
		margin-right: 5px;
		float: left;
	}
		
	.timeslotLegendText {
		float: left;
		font-size: 85%;
		margin-right: 10px;
		margin-top: 1px;
	}
	/* Defines rules for the timeslot legend */
	
	.inspectorDropDown {
		margin-left: 10px;
		border: 1px solid #004071; 
		font-size: 10px;
	}
	
</style>
	
</head>

<body>

<div id="content">

	<h1>INSPECTOR AVAILABILITY</h1>
	
	<p>Below is a snapshot of the timeslots for which you are available for a scheduled home inspection.  
	"Available" timeslots will show up on the "Schedule Your Inspection Time" page.</p>
       
	<p>
	<b style="text-transform: uppercase; font-size: 95%">Inspector: ${inspector.name}</b>
	<#if allInspectors?size gt 1>
		<script language="javascript">
			<!--
			function changeInspector(formElem) {
				selectedval = formElem[formElem.selectedIndex].value;
				if (selectedval != undefined && selectedval != "") {
					newUrl = 'viewScheduleRules.html?inspectorId=' + selectedval;
					document.location.href = newUrl;
				}
			}
			-->
		</script>
	
		<select class="inspectorDropDown" onchange="changeInspector(this)">
			<option value="">--change inspector--</option>
			<#list allInspectors as anotherInspector>
				<#if anotherInspector.id != inspector.id>
					<option value="${anotherInspector.id}">${anotherInspector.name}</option>
				</#if>
			</#list>
		</select>
	</#if>
	<br />	
	<#--b style="text-transform: uppercase;">Today's date: ${todayCal.time?string("MMM dd, yyyy")}</b -->
	
	<b style="text-transform: uppercase; font-size: 95%">Date Range: ${days[0].toDate()?string("MM/dd/yyyy")} - ${days[days?size -1].toDate()?string("MM/dd/yyyy")}</b>
	</p>
	
	
	<#if RequestParameters.msg?exists>
		<div id="message">
			-- <@spring.message RequestParameters.msg/> --
		</div>
	</#if>

	<div style="text-align: center; padding-top: 10px;">
		<a href="addNonRecurring.html?calStartDay=${days[0].day}&calStartMonth=${days[0].month}&calStartYear=${days[0].year?c}&inspectorId=${inspector.id}" class="formLink">--ADD TIMESLOT--</a>&nbsp&nbsp|
		<a href="addRecurring.html?calStartDay=${days[0].day}&calStartMonth=${days[0].month}&calStartYear=${days[0].year?c}&inspectorId=${inspector.id}" class="formLink">--ADD RECURRING TIMESLOT--</a>&nbsp&nbsp|
		<a href="listScheduleRules.html?inspectorId=${inspector.id}" class="formLink">--LIST/EDIT TIMESLOTS--</a> 
	</div>
	
	<div class="dateNavContainer">
		<!-- Previous/Next navigation -->
		<#if navCalPrevious??><a href="viewScheduleRules.html?start=<@imacro.navDateFormat navCalPrevious />&inspectorId=${inspector.id}" class="navBack">PREVIOUS WEEK</a></#if>
		<a href="viewScheduleRules.html?start=<@imacro.navDateFormat navCalNext />&inspectorId=${inspector.id}" class="navFwd">NEXT WEEK</a>
		<!-- / Previous/Next navigation -->
	</div>
	<br class="clearBoth" />

	
	<!-- contains all the calendar elements -->
	<div class="calendarContainer">
		
		<!-- contains the horizontal row of hours, the tic marks below them, and the horizontal line -->
		<span class="hourContainer">
		
			<#assign hourNumStartPosition = 96 />
			<#assign hourMarkerStartPosition = 100 />
			<#assign hourWidth = 36 />
			<#assign startHour = 6 />
			<#assign endHour = 18 />
			<#assign dayRowHeight = 45 />
			<#assign dayRowVertStartPosition = 50 />
			
			
			<!-- Build out the hours -->
				<#assign horzHourPosition = hourNumStartPosition />
				<#assign hourMarkerPosition = hourMarkerStartPosition />
				
				<#list startHour..endHour as hour>
				
					<span class="hour" style="left: ${horzHourPosition}px;">
						<#if (hour <= 12) >
							<#if (hour ==12)><span class="strongHour"></#if>
								${hour}
							<#if (hour ==12)></span></#if>							
						<#else>
						${hour - 12}
						</#if>
					</span>
					<span class="hourLine" style="left: ${hourMarkerPosition}px;"></span>
					
					<#assign horzHourPosition = (horzHourPosition + hourWidth) />
					<#assign hourMarkerPosition = (hourMarkerPosition + hourWidth) />
					
				</#list>
			<!-- Finished building hours -->
			
			<!-- AM/PM -->
			<span class="strongHour" style="position:absolute; left: ${hourNumStartPosition - 35}px">AM</span>
			<span class="strongHour" style="position:absolute; left: ${horzHourPosition-15}px">PM</span>
			<!-- Finished AM/PM -->
			
		</span> <!-- /hourContainer -->
		
		<!-- Build out the day rows -->
		<#assign vertDayRowPosition = dayRowVertStartPosition />
		
		<#list days as day>
			<div class="dayRow" style="top: ${vertDayRowPosition}px; height: ${dayRowHeight}px;">
				
				<#-- Day text -->
				<#if day.isBefore(todayCal) >
					<span class="pastDayTxt">
				<#else>
					<span class="dayTxt">
				</#if>
						${day.toDate()?string("EEE, MMM dd")}
					</span>
				<#-- End day text -->
				
				<#list day.timeslots as timeslot>
				
					<#--if (timeslot.available) -->
				
					<#-- determine the starting horizontal position for the slot -->
						<#assign slotStartPosition = hourMarkerStartPosition />
						<#list startHour..endHour as hour>
							<#if hour == timeslot.startTime.hour>
								<#break />
							</#if>
							<#assign slotStartPosition = (slotStartPosition + hourWidth) />
						</#list>
						
						<!--move the slot forward a bit to represents the minutes -->
						<#list 0..3 as minute>
							<#assign quarterHr = (minute*15) >
							<#if (quarterHr == timeslot.startTime.minute) >
								<#assign additionalHorz = (minute * (hourWidth / 4)) />
								<#assign slotStartPosition = (additionalHorz + slotStartPosition) />
							</#if>
						</#list>
					<!-- finished determining the horizontal position for the slot -->
					
					<!-- determine slot width -->
						<#assign timeSlotWidth = ((timeslot.quarterHourIncrementCount-1) * (hourWidth / 4)) />
					<!-- finished determining the slot width -->
					
					<!-- availability bar -->
					<span class="timeslotWrapper <#if timeslot.available>timeslotWrapperAvail<#else>timeslotWrapperUnavail</#if>" style="left: ${slotStartPosition}px; width: ${timeSlotWidth}px;">
						<div class="timeslot <#if timeslot.available>timeslotAvail<#else>timeslotUnavail</#if>  <#if timeslot.originatingRule.frequencyType == "DAY_OF_WEEK">recurring</#if>">
							<#if (timeslot.originatingRule.frequencyType == "SINGLE_DAY")>
								<#assign editUrl = "editNonRecurring.html" />
							<#else>
								<#assign editUrl = "overrideRecurring.html" />
							</#if>
						
							<a href="${editUrl}?ruleId=${timeslot.originatingRule.id}&inspectorId=${inspector.id}&day=${day.day}&month=${day.month}&year=${day.year?c}" title="${timeslot.startTime} - ${timeslot.endTime}">
							<#-- make sure we won't have the time breaking into two lines -->
							${timeslot.startTime} 
							<#if (timeSlotWidth > 100) >
							 - ${timeslot.endTime}
							 <#else >
							 	...
							 </#if>
							 </a>
						</div>
					</span>
					<!-- end availability bar -->
					
					<#--/#if --> <#-- /if timeslot.available -->
				</#list> <#-- timeslot loop -->
				
			</div>	<!-- /dayRow -->
			
			<#assign vertDayRowPosition = vertDayRowPosition + dayRowHeight />				
		</#list>
		<!-- End the day rows -->
		
	</div> <!-- /calendarContainer -->
	
	<div class="timeslotLegend">
		<div class="legendBox timeslotAvail">&nbsp;</div> <div class="timeslotLegendText">= AVAILABLE</div>
		<div class="legendBox timeslotUnavail">&nbsp;</div> <div class="timeslotLegendText">= UNAVAILABLE</div>
		<div class="legendBox timeslotAvail recurring">&nbsp;</div> <div class="timeslotLegendText">= RECURRING</div>
	</div>
	<br style="clear:both">
	
	
	<div style="text-align: center; padding-top: 20px;">
		<a href="addNonRecurring.html?calStartDay=${days[0].day}&calStartMonth=${days[0].month}&calStartYear=${days[0].year?c}&inspectorId=${inspector.id}" class="formLink">--ADD TIMESLOT--</a>&nbsp&nbsp|
		<a href="addRecurring.html?calStartDay=${days[0].day}&calStartMonth=${days[0].month}&calStartYear=${days[0].year?c}&inspectorId=${inspector.id}" class="formLink">--ADD RECURRING TIMESLOT--</a>&nbsp&nbsp|
		<a href="listScheduleRules.html?inspectorId=${inspector.id}" class="formLink">--LIST/EDIT TIMESLOTS--</a> 
	</div>

</div> <!-- /content -->
</body>
</html>
